{% extends "base-adv.html" %}


{% block content %}

<div class="container single-container">
<h2 class="text-center">My profile</h2>
	
	
	<div class="row">
		<div class="col-xs-2 col-xs-offset-2">
			<img src="/img/empty-profile.png" />
		</div>
		
		<div class="col-xs-6">
			<div class="row">
			<form name="f" role="form" class="form-horizontal" action="/save-profile" method="POST"
				onsubmit="return checkform()">
				<div class="form-group">
					<label class="col-xs-4 control-label">E-mail [hidden]</label>
					<div class="col-xs-8">
						<input type="text" class="form-control" disabled value="{{ profile.email }}" />
					</div>
				</div>

				<div class="form-group">
					<label class="col-xs-4 control-label">Joined</label>
					<div class="col-xs-8">
						<input type="text" class="form-control" disabled value="{{ profile.join_date|date:"d M Y" }}" />
					</div>
				</div>
				
				<div class="form-group">
					<label class="col-xs-4 control-label">Display name</label>
					<div class="col-xs-8">
						<input type="text" class="form-control" name="nickname" value="{{ profile.nickname }}" />
					</div>
				</div>
				
				<div class="form-group">
					<div class="col-xs-8 col-xs-offset-4">
						<button type="submit" class="btn btn-primary">Save profile</button>
					</div>
				</div>
			</form>
			</div>
		</div>
	
	</div>
</div>

<div id="modal-empty-nickname" class="modal hide fade">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h3>Error</h3>
  </div>
  <div class="modal-body">
    <p>Nickname cannot be empty</p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal">Close</a>
  </div>
</div>


<script>
function checkform() {
	var nickname=$("input[name=nickname]").val();
	if (!nickname) {
		$("#modal-empty-nickname").modal();
		return false;
	}
	
	return true;
}
</script>

  
{% endblock content %}


